<!-- 历史报警 -->
<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { warnApi as MainApi, warnById as MainById, deviceApi } from '@T2/service/api.ts';
import UnitByPosition from '@T2/views/Project/Manage/components/select/unitByPosition.vue';
import dayjs from 'dayjs';

const Rt = reactive({
  unitList: [],
  deviceList: [],
  timeRange: '',
});
const unitlistChange = (data) => {
  Rt.unitList = data;
  if (data.length === 1) {
    Filter.unit = data[0].id;
    Filter.device = null;
    getDeviceList();
  } else {
    GetMainTable();
  }
}
const unitChange = (data, node) => {
  if (data.hasOwnProperty('positon')) {
    Filter.unit = data.id;
    Filter.device = null;
    getDeviceList();
  }
}
const unitClear = () => {
  Filter.unit = null;
  Filter.device = null;
  Rt.deviceList = [];
}
const getDeviceList = () => {
  deviceApi({
    method: 'get',
    params: {
      unit: Filter.unit,
    }
  }).then(res => {
    Rt.deviceList = res?.results || [];
  });
}

const MainTable = reactive({
  data: [],
  total: 0,
});
const Filter = reactive({
  page: 1,
  pagesize: 30,
  ordering: '-create_time',
  search: '',
  unit: null,
  device: null,
  ruletype: null,
  level: null,
  create_time__range: null,
});
const disableDate = (time) => {
  return time.getTime() > dayjs().valueOf();
}
const timeRangeChange = (array) => {
  if (array) {
    let start = dayjs(array[0]).format('YYYY-MM-DD') + ' 00:00:00';
    let end = dayjs(array[1]).format('YYYY-MM-DD') + ' 23:59:59';
    Filter.create_time__range = start + ',' + end;
  } else {
    Filter.create_time__range = null;
  }
}
watch(() => ({...Filter}), (nv, ov) => {
  if (nv.page === 1 || nv.page !== ov.page) {
    GetMainTable();
  } else {
    Filter.page = 1;
  }
});
const GetMainTable = () => {
  MainApi({
    method: 'get',
    params: {
      ...Filter,
      history: true,
    }
  }).then(res => {
    MainTable.data = res?.results || [];
    MainTable.total = res?.count || 0;
  });
}
const levels = { 一: '#32C5FF', 二: '#F7B500', 三: '#FF0000', 四: '#880404',};

const detailRt = reactive({
  visible: false,
  data: null,
});
const handleMainDetail = (row) => {
  detailRt.visible = true;
  detailRt.data = row;
}
</script>

<template>
  <div class="view flex">
    <div class="alarm-box flex-column mainCard">
      <el-form label-width="120px" class="flex t_form">
        <el-form-item label="所属站点：" v-show="Rt.unitList.length > 1">
          <div style="width: 90%">
            <UnitByPosition
              :clearable="true"
              @unitlist-change="unitlistChange"
              @current-change="unitChange"
              @clear="unitClear"
            />
          </div>
        </el-form-item>
        <el-form-item label="报警设备：" v-if="Filter.unit">
          <el-select v-model="Filter.device" clearable>
            <el-option
              v-for="item in Rt.deviceList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="报警类型：">
          <el-select v-model="Filter.ruletype" clearable>
            <el-option value="设备故障" label="设备故障"></el-option>
            <el-option value="工艺异常" label="工艺异常"></el-option>
            <el-option value="系统故障" label="系统故障"></el-option>
            <el-option value="通信故障" label="通信故障"></el-option>
            <el-option value="其他故障" label="其他故障"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报警等级：">
          <el-select v-model="Filter.level" clearable>
            <el-option value="一" label="一级"></el-option>
            <el-option value="二" label="二级"></el-option>
            <el-option value="三" label="三级"></el-option>
            <el-option value="四" label="四级"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期范围：" style="width: 400px;">
          <el-date-picker
            v-model="Rt.timeRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="timeRangeChange"
            :disabled-date="disableDate"
          />
        </el-form-item>
      </el-form>
      <el-table :data="MainTable.data" scrollbar-always-on>
        <el-table-column label="报警时间" prop="create_time" min-width="160px" show-overflow-tooltip></el-table-column>
        <el-table-column label="报警设备" prop="device_name" min-width="140px" show-overflow-tooltip></el-table-column>
        <el-table-column label="报警信息" prop="info" min-width="200px"></el-table-column>
        <el-table-column label="报警值" prop="value" align="center" min-width="90px"></el-table-column>
        <el-table-column label="所属站点" prop="unit_name" min-width="140px" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column label="所属区域" prop="unit" min-width="200px" :formatter="formatterPosition" show-overflow-tooltip></el-table-column> -->
        <el-table-column label="报警等级" prop="level" align="center" min-width="90px">
          <template #default="scope">
            <span :style="{color: levels[scope.row.level]}">{{ scope.row.level }}级</span>
          </template>
        </el-table-column>
        <el-table-column label="报警类型" prop="ruletype" min-width="90px"></el-table-column>
        <el-table-column label="当前状态" prop="status" align="center" min-width="120px">
          <template #default="scope">
            <div class="flex-center-center">
              <div class="t-status" v-if="scope.row.reset_time">已恢复</div>
              <div class="t-status confirm" v-else-if="scope.row.confirm_time">已确认</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="恢复时间" prop="reset_time" min-width="160px"></el-table-column>
        <el-table-column label="操作" fixed="right" min-width="80px">
          <template #default="scope">
            <el-button link type="primary" @click="handleMainDetail(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="->, total, prev, pager, next, sizes"
        background 
        :page-sizes="[10, 20, 30, 50, 100]"
        :pager-count="5"
        v-model:currentPage="Filter.page"
        v-model:page-size="Filter.pagesize"
        :total="MainTable.total"
      />
    </div>
  </div>
  
  <!-- 详情 -->
  <div>
    <el-dialog width="620px" v-model="detailRt.visible">
      <template #header>
        <div class="detail-header flex--center">
          报警详情
          <button v-if="detailRt.data.reset_time">已恢复</button>
          <button class="confirm" v-else-if="detailRt.data.confirm_time">已确认</button>
        </div>
      </template>
      <div class="detail-body flex-column">
        <div class="flex--center">
          <label style="color: #111111">报警时间：</label>
          <span style="color: #999999">{{ detailRt.data.create_time }}</span>
        </div>
        <div class="flex--center">
          <label style="margin-top: 24px;color: #111111">报警信息</label>
        </div>
        <div class="detail">
          <div class="detail-item flex--center">
            <label>报警设备：</label>
            <p>{{ detailRt.data.device_name }}</p>
          </div>
          <div class="detail-item flex--center">
            <label>报警信息：</label>
            <p>{{ detailRt.data.info }}</p>
          </div>
          <div class="detail-item flex--center">
            <label>所属站点：</label>
            <p>{{ detailRt.data.unit_name }}</p>
          </div>
          <div class="detail-item flex--center">
            <label>报警等级：</label>
            <p :style="{color: levels[detailRt.data.level]}">{{ detailRt.data.level }}级</p>
          </div>
          <div class="detail-item flex--center">
            <label>报警类型：</label>
            <p>{{ detailRt.data.ruletype }}</p>
          </div>
          <div class="detail-item flex--center">
            <label>报警值：</label>
            <p>{{ detailRt.data.value }}</p>
          </div>
          <div class="detail-item flex--center">
            <label>参考值：</label>
            <p>{{ detailRt.data.threshold }}</p>
          </div>
        </div>
        <div class="flex--center" v-if="detailRt.data.reset_time">
          <label style="color: #111111">恢复时间：</label>
          <span style="color: #999999">{{ detailRt.data.reset_time }}</span>
        </div>
        <div class="detail" v-else-if="detailRt.data.confirm_time">
          <div>
            <label style="color: #111111">确认时间：</label>
            <span style="color: #999999">{{ detailRt.data.confirm_time }}</span>
          </div>
          <div>
            <label style="color: #111111">确认人：</label>
            <span style="color: #999999">{{ detailRt.data.confirm_user_name }}</span>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="detailRt.visible = false">关 闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
@use '@T2/styles/normal.scss';
.view {
  width: 100%;
  height: 100%;
}
.position {
  width: fit-content;
  height: calc(100% - 20px);
  background: #FFFFFF;
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.15);
  border-radius: 10px;
  margin: 10px;
}
.alarm-box {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.t-status {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #00B42A;
  }
  &.confirm::before {
    background-color: #0079FE;
  }
}

.detail-header {
  padding: 16px;
  width: 100%;
  font-size: 20px;
  color: #252525;
  border-bottom: 1px solid #EDEFF3;
  button {
    margin-left: 12px;
    padding: 3px 12px;
    background: #F0F9EB;
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #E1F3D8;
    font-size: 14px;
    color: #67C23A;
    height: 28px;
    &.confirm {
      border-color: #D9ECFF;
      background-color: #ECF5FF;
      color: #409EFF;
    }
  }
}
.detail-body {
  padding: 17px 24px;
  .detail {
    padding: 16px 0;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
    label {
      font-size: 14px;
      color: #999999;
    }
    p {
      font-size: 14px;
      color: #111111;
    }
  }
}
</style>

<style scoped>
:deep(.el-dialog) {
  padding: 0;
  display: flex;
  flex-direction: column;
}
:deep(.el-dialog .el-dialog__header.show-close) {
  padding: 0;
  display: flex;
  justify-content: space-between;
  position: relative;
}
:deep(.el-dialog .el-dialog__headerbtn) {
  height: 100%;
  aspect-ratio: 1/1;
  width: auto;
}
:deep(.el-dialog .el-dialog__footer) {
  margin-right: 24px;
  margin-bottom: 24px;
}
</style>